<template>
      <div id="videoView">
            <draggable :distanceRight='0' :distanceBottom='50' :isScrollHidden='false' :isCanDraggable='true'>
                  <div style="height: 50px; width: 50px;background-color: #404040;border-radius:50%;"
                       @click="refresh()"></div>
            </draggable>
      </div>
</template>

<script>

import draggable from '@/compotent/Draggable'

export default {
      name: "videoView",
      components: {
            draggable
      },
      data() {
            return {
                  covers: [],
                  images:[]
            }
      },
      methods: {
            getVideoBase64(url) {
                  let self = this
                  return new Promise(function (resolve) {
                        let dataURL = '';
                        let video = document.createElement("video");
                        video.crossOrigin = "anonymous";
                        video.src = url;
                        video.width = 400;
                        video.height = 240;
                        video.currentTime = 100;
                        video.addEventListener('loadeddata', function () {
                              let canvas = document.createElement("canvas"),
                                      width = video.width,
                                      height = video.height;
                              canvas.width = width;
                              canvas.height = height;
                              canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
                              dataURL = canvas.toDataURL('image/jpeg');
                              resolve(dataURL);
                        });
                        video.addEventListener('click', function () {
                              let values = {}
                              values.url = url
                              // localStorage.setItem("currentUrl", JSON.stringify(values))
                              // let routeUrl = self.$router.resolve({
                              //       path: "/videoPlay"
                              // });
                              // window.open(routeUrl.href, '_self');
                              // window.location.reload();
                              window.location.href = url
                        });
                       document.body.appendChild(video)
                  })
            },
            homeInit() {
                  let self = this;
                  this.axios.get(this.basicUrl + '/video')
                          .then(function (response) {
                                self.covers = response.data;
                                localStorage.setItem("covers_video", JSON.stringify(response.data))
                                localStorage.setItem("covers_video_time", new Date().getTime() + "")
                          })
            },
            refresh() {
                  this.homeInit()
                  window.location.reload();
            }
      },
      created() {
            if (!localStorage.getItem("covers_video_time") || (localStorage.getItem("covers_video_time") - new Date().getTime()) > 1000 * 60 * 60) {
                  this.homeInit();
            } else {
                  this.covers = JSON.parse(localStorage.getItem("covers_video"))
            }
            let self = this;
            self.covers.forEach(T => self.getVideoBase64(self.basicUrl + "/" + T))
      }
}
</script>